<template>
	<div class="book">
		<div class="book-box-content">
			<div class="book-left">
				<div class="book-content">
					<div class="book-title animate__animated f-big-second" :class="{animate__flipInX:animation}"
						v-show="animation">{{ $t('index.book.title') }}
					</div>
					<div class="book-title-little animate__animated f2" :class="{animate__flipInX:animation}"
						v-show="animation">{{ $t('index.book.titleSmall') }}
					</div>
					<div class="book-main">
						<div class="book-main-image animate__animated" :class="{animate__flipInX:animation}"
							v-show="animation" :style="{background:`url('${mainArticle.img}')`,backgroundSize:'cover'}">
						</div>
						<div class="book-main-describe">
							<div>
								<div class="book-main-title animate__animated f2" :class="{animate__flipInX:animation}"
									v-show="animation">
									&lt;&lt;{{ mainArticle.title }}&gt;&gt;
								</div>
								<div class="book-main-time animate__animated " :class="{animate__flipInX:animation}"
									v-show="animation">
									<div>{{ mainArticle.name }} 2021-08-07 出版————————————</div>
								</div>
								<div class="box-main-content animate__animated f2" :class="{animate__flipInX:animation}"
									v-show="animation" v-html="mainArticle.content"></div>
							</div>
							<div class="book-main-more animate__animated" :class="{animate__flipInX:animation}"
								v-show="animation">
								<div class="learn-more" @click="()=>{this.$router.push('/legalWorks')}"> 了解更多 &gt;&gt;
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="book-right">
				<div class="book-button base-button-border animate__animated" :class="{animate__flipInX:animation}"
					v-show="animation" @click="()=>{this.$router.push('/legalWorks')}">
					{{ $t('index.book.rightButton') }}
				</div>
				<div class="book-list">
					<div class="book-list-item animate__animated" v-for="a in lawArticleList"
						:class="{animate__flipInX:animation}" v-show="animation">
						<div class="book-item-image" :style="{background:`url('${a.img}')`,backgroundSize:'cover'}">
						</div>
						<div class="book-item-name">《{{ a.title }}》</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	export default {
		props: ['mainArticle', 'lawArticleList', 'animation']
	}
</script>
<style lang="less">
	.book::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(255, 255, 255, 0.8);
	}

	.five-box {
		.book {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: url("~@/assets/img/news-header.png");
			position: relative;
			background-size: cover;
			.book-box-content {
				max-width: 1200px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				position: relative;
			}

			.book-left {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				height: 100%;

				.book-content {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					height: 100%;

					.book-title {
						width: 100%;
						font-size: 26px;
						line-height: 30px;
						margin-bottom: 64px;
						color: #707070;
					}

					.book-title-little {
						font-size: 14px;
						line-height: 26px;
						margin-bottom: 100px;
						color: #717171;
					}

					.book-main {
						display: flex;
						flex-direction: row;

						.book-main-image {
							width: 30%;
							background: #000;
						}

						.book-main-image:after {
							content: '';
							display: block;
							padding-top: 165%;
						}

						.book-main-describe {
							width: 60%;
							margin-left: 10%;
							color: #717171;
							font-size: 18px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.book-main-time {
								margin-top: 5px;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;

								div {
									width: 100%;
								}

								hr {
									width: 100%;
									height: 1px;
									background: #717171;
									border: none;
								}
							}

							.box-main-content {
								text-indent: 2em;
								overflow: hidden;
								word-break: break-all;
								display: -webkit-box;
								-webkit-line-clamp: 12;
								/* 指定行数*/
								-webkit-box-orient: vertical;
							}

							.book-main-more {
								letter-spacing: 0.2rem;

								.learn-more {
									color: #993C1A;
									cursor: pointer;
									border-bottom: 1px solid #993C1A;
									height: 20px;
									display: inline-block;
								}
							}
						}
					}
				}
			}

			.book-right {
				width: 40%;
				display: flex;
				align-items: flex-end;
				flex-direction: column;
				justify-content: space-around;
				height: calc(100% - 20px);
				padding: 0 0 0 20px;

				.book-button {
					width: 30%;
					margin-bottom: 220px;
				}

				.book-list {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.book-list-item {
						display: flex;
						flex-direction: column;
						width: 30%;
						height: 100%;
						justify-content: space-between;

						.book-item-image {
							background: #000;
							width: 100%;
						}

						.book-item-image:after {
							content: '';
							display: block;
							padding-top: 165%;
						}

						.book-item-name {
							margin: 1rem;
							text-align: center;
						}
					}
				}
			}
		}

	}
</style>
